<template>
  <div class="recipe">
    <!-- 菜谱分类 -->
    <el-tabs type="border-card" v-model="currentClassify" @tab-click="tabClick">
      <el-tab-pane
        v-for="item in classifies"
        :key="item.parent_type"
        :label="item.parent_name"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <router-link
            v-for="i in item.list"
            :key="i.type"
            :to="{ query: { ...$route.query, classify: i.type } }"
            :class="{ active: currentType === i.type }"
          >
            {{ i.name }}
          </router-link>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- 展示 -->
    <h2>家常好味道，给你家一般的温暖</h2>
    <el-container>
      <filter-aside :properties="properties" :currentTagType="currentTagType" />

      <el-main class="filter-menus-box">
        <div class="menu-empty" v-show="!list.length && !loading">
          暂时没有该菜谱信息，请选择其他筛选条件
        </div>
        <menu-card class="card" :info="list" />
        <div class="pagination" v-show="!loading">
          <el-pagination
            :total="data.total"
            :page-size="data.page_size"
            :current-page.sync="page"
            @current-change="pageChange"
            layout="prev,pager,next,->,total"
            :hide-on-single-page="true"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import FilterAside from "./filter-aside";
import MenuCard from "@/components/menu-card";

import { getClassify, getProperty, getMenus } from "@/service";

export default {
  data() {
    return {
      // 菜谱分类: tab
      classifies: [],
      currentClassify: "",
      currentType: "",
      // 属性信息: aside
      properties: [],
      currentTagType: {},
      // 菜谱信息
      list: [],
      loading: false,
      data: {},
      // 分页
      page: 1,
    };
  },
  components: {
    FilterAside,
    MenuCard,
  },

  /* 创建时获取数据 */
  created() {
    getClassify().then((res) => {
      // console.log(res);
      this.classifies = res.data;

      /* 设置路由默认参数 */
      if (!this.$route.query.classify) {
        this.currentClassify = this.classifies[0].parent_type;
        this.currentType = this.classifies[0].list[0].type;
        this.$router.push({
          query: {
            classify: this.currentType,
            page: 1,
          },
        });
      }
    });

    getProperty().then((res) => {
      // console.log(res);
      this.properties = res.data;
      /* 初始化 currentTagType对象 */
      const { query } = this.$route;
      this.currentTagType = this.properties.reduce((o, item) => {
        o[item.title] = query[item.title] ? query[item.title] : "";
        return o;
      }, {});
    });
  },

  watch: {
    $route: {
      handler() {
        const { classify, page } = this.$route.query;
        if (classify) {
          this.currentType = classify; // 1-1
          this.currentClassify = classify[0];
        }
        if (page) {
          this.page = +page; // 隐式数值转换
        }
        this.getList();
      },
      immediate: true,
    },
  },

  methods: {
    getList() {
      const query = { ...this.$route.query };
      const params = {
        classify: query.classify,
        page: query.page || 1,
      };
      delete query.classify;
      delete query.page;
      if (Object.keys(query).length) {
        params.property = {
          ...query,
        };
      }

      this.loading = true;
      /* element-ui的loading服务 */
      let loadingInstance = null;
      this.$nextTick(() => {    // 将回调延迟到下次 DOM 更新循环之后执行
        loadingInstance = this.$loading({
          target: ".filter-menus-box",
          text: "加载中...",
          spinner: "el-icon-loading",
          background: "rgba(0,0,0,0.7)",
        });
      });

      this.list = []; // 每次请求之前都清空

      getMenus(params).then((res) => {
        // console.log(res);
        this.loading = false;
        if (loadingInstance) loadingInstance.close();

        this.data = res.data;
        this.list = this.data.list;
        this.page = this.data.current_page;
      });
    },

    pageChange() {
      this.$router.push({
        query: {
          ...this.$route.query,
          page: this.page,
        },
      });
    },

    tabClick() {
      const currentClassify = this.currentClassify; // v-modal 双向绑定了 currentClassify
      const item = this.classifies.find(
        (item) => item.parent_type === currentClassify
      );
      if (item) {
        this.currentType = item.list[0].type;
        this.$router.push({
          query: {
            ...this.$route.query,
            classify: this.currentType,
          },
        });
      }
    },
  },
};
</script>

<style>
.card {
  min-height: 75%;
}
.pagination {
  text-align: right;
}
.el-pagination__rightwrapper {
  margin-left: 10px;
}
.recipe-link {
  margin-top: 5px;
}
.recipe-link a {
  display: inline-block;
  font-size: 12px;
  padding: 0 8px;
  height: 28px;
  line-height: 28px;
  color: black;
}
.active {
  background-color: #ff3232;
  color: #fff;
}
.recipe h2 {
  text-align: center;
  line-height: 150px;
}
.recipe .el-main {
  padding: 0;
}
.menu-empty {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
</style>